<template>
	<view class="search">
		<musicHead :icon='true' title='搜索' color='#000' :iconblack='true'/>
		<view class="container">
			<scroll-view class="scroll" scroll-y="true">
				<view class="search-search">
					<text class="iconfont icon-sousuo"></text>
					<input 
					type="text" 
					placeholder="搜索" 
					v-model="searchWord" 
					@confirm="handleToSearch(searchWord)"
					@input="handleSuggest"
					>
					<text class="iconfont icon-guanbi" @tap="handleToClose"></text>
				</view>
				<block v-if='searchType === 1'>
					<view class="search-history">
						<view class="search-history-head">
							<text>历史记录</text>
							<text class="iconfont icon-shanchu" @tap="handleToClear"></text>
						</view>
						<view class="search-history-list">
							<view v-for="(item,index) in searchHistory" :key='index' @tap="handleToWord(item)">{{item}}</view>
						</view>
					</view>
					<view class="search-hot">
						<view class="search-hot-head">热搜榜</view>
						<view class="search-hot-item" v-for='(item,index) in hotList' :key='index' @tap="handleToWord(item.searchWord)">
							<view class="search-hot-top">{{index + 1}}</view>
							<view class="search-hot-word">
								<view>
									{{item.searchWord}}
									<image :src='item.iconUrl'></image>
									<view>{{item.content}}</view>
								</view>
							</view>
							<view class="search-hot-count">{{item.score}}</view>
						</view>
					</view>
				</block>
				<block v-else-if='searchType === 2'>
					<view class="search-result">
						<view class="search-result-item" 
						v-for='(item,index) in searchList' 
						:key='index'
						@tap="handleToDetail(item.id)"
						>
							<view class="search-result-word">
								<view>{{item.name}}</view>
								<view>{{item.artists[0].name}} - {{item.album.name}}</view>
							</view>
							<view class="icinfont icon-bofang" v-show="searchType !== 1"></view>
						</view>
					</view>
				</block>
				<block v-else-if="searchType === 3">
					<view >
						<view class="search-suggest">
							<view class="search-suggest-head">搜索{{searchWord}}</view>
							<view 
								class="search-suggest-item"
								v-for="(item,index) in searchSuggest"
								:key='index'
								@top='handleToWord(item.keyword)'
							>
								<text class="iconfont icon-sousuo"></text>{{item.keyword}}
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import '@/common/iconfont.css';
	import musicHead from '../../components/musicHead/index.vue';
	import {_searchHot,_searchWord,_searchSuggest} from '../../common/api.js';
	export default {
		data() {
			return {
				hotList:[],
				searchWord: '',
				searchHistory: [],
				searchType: 1,
				searchList: [],
				searchSuggest:[]
			}
		},
		onLoad() {
			this.init();
		},
		components:{
			musicHead
		},
		methods:{
			async init() {
				let res = await _searchHot();
				if(res.data.code === 200) {
					this.hotList = res.data.data;
				}
				uni.getStorage({
					"key":"searchHistory",
					success:res => {
						this.searchHistory = res.data;
					}
				})
			},
			handleToWord(word) {
				this.searchWord = word;
				this.handleToSearch(word);
			},
			handleToSearch(word) {
				this.searchHistory.unshift(word);
				this.searchHistory = [...new Set(this.searchHistory)]
				if(this.searchHistory.length > 10) {
					this.searchHistory.length = 10;
				}
				uni.setStorage({
					'key':'searchHistory',
					data:this.searchHistory
				})
				this.getSearchList(word);
			},
			handleToClear() {
				uni.removeStorage({
					key:'searchHistory',
					success:res => {
						this.searchHistory = [];
					}
				})
			},
			async getSearchList(word) {
				let res = await _searchWord(word);
				// console.log('res',res)
				if(res.data.code === 200) {
					this.searchList = res.data.result.songs;
					this.searchType = 2;
				}
			},
			handleToClose() {
				this.searchWord = '';
				this.searchType = 1;
			},
			handleToDetail(songId) {
				uni.navigateTo({
					url:`/pages/detail/index?id=${songId}`
				})
			},
			async handleSuggest(ev){
				// console.log(ev);
				let val = ev.detail.value;
				if(!val){
					this.searchType = 1;
					return
				}
				let res = await _searchSuggest(val);
				console.log(res);
				if(res.data.code === 200) {
					this.searchSuggest = res.data.result.allMatch;
					this.searchType = 3;
				}
			}
		}
	}
</script>

<style scoped>
	.search-search{
		display: flex;
		align-items: center;
		height: 70upx;
		margin: 70upx 30upx 50upx 30upx; 
		background-color: #f7f7f7;
		border-radius: 50upx;
	}
	.search-search text{font-size: 26upx;margin-right: 26upx;margin-left: 28upx;}
	.search-search input{font-size: 28upx;flex: 1;}
	
	.search-history{margin:0 30upx;}
	.search-history-head{display: flex;justify-content: space-between;margin-bottom: 16upx;}
	.search-history-list{display: flex;flex-wrap: wrap;}
	.search-history-list view{padding: 16upx 28upx;border-radius: 40upx;margin-left: 30upx;margin-bottom: 30upx;background-color: #f7f7f7;}
	
	.search-hot{margin:0 30upx;font-size: 26upx;}
	.search-hot-head{margin-bottom: 36upx;}
	.search-hot-item{display: flex;align-items: center;margin-bottom: 58upx;}
	.search-hot-top{color:#fb2222;width: 60upx;margin-left: 8upx;}
	.search-hot-word{flex: 1;}
	.search-hot-word view:nth-child(1){font-size: 30upx;color: #000;}
	.search-hot-word view:nth-child(2){font-size: 24upx;color: #878787;}
	.search-hot-word image{width: 48upx;height: 22upx;}
	.search-hot-count{color: #878787;}
	
	.search-result{border-top: 2upx solid #e4e4e4;padding:30upx;}
	.search-result-item{display: flex;justify-content: space-between;align-items: center;padding-bottom: 30upx;margin-bottom: 30upx;border-bottom: 1upx solid #E4E4E4;}
	.search-result-word{}
	.search-result-word:nth-child(1){font-size: 28upx;color:#235790;margin-bottom: 12upx;}
	.search-result-word:nth-child(2){font-size: 20upx;color: #898989;}
	.search-result-item text{}
	
	.search-suggest{border-top: 2upx solid #e4e4e4;padding:30upx;}
	.search-suggest-head{margin-bottom: 36upx;color:#4574a5;}
	.search-suggest-item{margin-bottom: 36upx;color:#5d5d5d;}
	.search-suggest-item text{color: #dbdbdb;margin-right: 28upx;}
</style>
